<template>
	<view class="page">
		<CustomNav :isBack="false" color="#fff" :topBgColor="topBgColor"></CustomNav>
		<view class="swiper-block">
			<swiper autoplay="true" indicator-dots="true" indicator-color="#999" indicator-active-color="#fff"
				class="swiper-item">
				<swiper-item :item-id="item.id" v-for="(item,index) in swiperList" :key="item.id" class="bg-item">
					<image :src="item.imgUrl" class="bg-img" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info-block">
			<view class="top-block">
				<view class="gas-block">
					<view class="gas-item" @click="navigate('/page_pack/payment/list')">
						<view class="name-item">
							<view class="name FZHZGBJ">燃气缴费</view>
							<view class="text">缴费、预存</view>
						</view>
						<image
							src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/gas-pay.png"
							class="gas-img">
						</image>
					</view>
					<view class="gas-item" @click="navigate('/page_pack/query/query')">
						<view class="name-item">
							<view class="name FZHZGBJ">户号查询</view>
							<view class="text">查询并缴费</view>
						</view>
						<image
							src="https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/number.png"
							class="gas-img">
						</image>
					</view>
				</view>
				<view class="menu-block">
					<view class="menu-item" v-for="item in menuList" :key="item.id" @click="goDetail(item)">
						<image :src="item.img" class="menu-img"></image>
						<view class="menu-name">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="service-block">
				<view class="title FZHZGBJ">便民服务</view>
				<view class="service-info">
					<view class="service-list" v-for="item in serviceList" :key="item.id" @click="navigate(item.url)">
						<image :src="item.img" class="service-img"></image>
						<view class="service-name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				swiperList: [{
					id: 1,
					imgUrl: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/banner.png'
				}],
				menuList: [{
						id: 1,
						url: '/page_pack/company/company',
						img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/zixun.png',
						name: '咨询电话',
					},
					{
						id: 2,
						url: '/page_pack/company/address',
						img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/daohang.png',
						name: '大厅导航'
					},
					{
						id: 3,
						url: '/page_pack/payment/record',
						img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/jilu.png',
						name: '缴费记录',
					},
					// {
					// 	id: 4,
					// 	url: '/page_pack/payment/balance',
					// 	img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/chaxun.png',
					// 	name: '余额查询'
					// }
					{
						id: 4,
						url: '/page_pack/complaint/complaint',
						img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/tousujiany.png',
						name: '投诉建议'
					}
				],
				serviceList: [{
						id: 1,
						url: '/page_pack/information/information?type=1',
						img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/gonggao.png',
						name: '信息公告'
					},
					{
						id: 2,
						url: '/page_pack/information/information?type=2',
						//url: '/page_pack/notice/notice',
						img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/tingqi.png',
						name: '停气通知'
					},
					// {
					// 	id: 3,
					// 	url: '/page_pack/complaint/complaint',
					// 	img: 'https://jinta-gas-charge-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/home/tousu.png',
					// 	name: '投诉建议'
					// },
				]
			}
		},
		watch: {

		},
		methods: {
			//onShareAppMessage 分享给朋友
			onShareAppMessage: function(res) {
				if (res.from === 'button') {

				}
				return {
					title: '金塔县燃气收费平台',
					path: '/pages/index/index'
				}
			},
			onShareTimeline() { // 分享到朋友圈
				return {
					title: '金塔县燃气收费平台',
					path: '/pages/index/index'
				}
			},
			goDetail(item) {
				// if (item.id === 1) {
				// 	this.call('0937 - 4421777')
				// } else if (item.id == 2) {
				// 	this.openMap(39.964002, 98.893798, '金塔县凯源天然气有限责任公司')
				// } else {
				// 	this.navigate(item.url)
				// }
				this.navigate(item.url)
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #F4F8FF;

		.swiper-block {
			height: 600rpx;
			width: 100%;

			.swiper-item {
				width: 100%;
				height: 600rpx;

				.bg-item {
					width: 100%;
					height: 100%;

					.bg-img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.info-block {
			padding: 0 30rpx;
			position: relative;

			.top-block {
				height: 100%;
				background: #FFFFFF;
				margin-top: -160rpx;
				border-radius: 20rpx;
				padding: 30rpx;

				.gas-block {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.gas-item:last-child {
						background-image: linear-gradient(to right, #F48D76, #F2734E);
					}

					.gas-item {
						width: calc(50% - 15rpx);
						padding: 40rpx 10rpx 40rpx 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-image: linear-gradient(to right, #67D3B8, #50C5A6);
						border-radius: 20rpx;
						color: #FFFFFF;

						.name-item {
							display: flex;
							flex-direction: column;

							.name {
								font-size: 36rpx;
							}

							.text {
								font-size: 25rpx;
								margin-top: 20rpx;
							}
						}

						.gas-img {
							width: 90rpx;
							height: 90rpx;
						}
					}
				}

				.menu-block {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.menu-item:nth-child(4n) {
						margin-right: 0;
					}

					.menu-item {
						width: calc((100% - 90rpx) / 4);
						margin-right: 30rpx;
						//margin-bottom: 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.menu-img {
							width: 90rpx;
							height: 90rpx;
							margin-bottom: 20rpx;
						}

						.menu-name {
							font-size: 30rpx;
						}
					}
				}
			}

			.service-block {
				background-color: #FFFFFF;
				margin-top: 30rpx;
				padding: 30rpx;
				border-radius: 20rpx;

				.title {
					font-size: 32rpx;
				}

				.service-info {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 30rpx;

					.service-list {
						width: calc(50% - 10rpx);
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 20rpx 30rpx;
						background: #F6F6F6;
						margin-bottom: 20rpx;
						border-radius: 20rpx;


						.service-img {
							width: 70rpx;
							height: 70rpx;
							margin-right: 30rpx;
						}

						.service-name {
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
</style>